<template>
	<view class="bf">
		<view class="p23 c0">
			<view class="bf5a f-row t-c f24 bs20 l-h1">
				<view class="f-1 b-r-d p30">
					<view>今日收款/元</view>
					<view class="f50 wei mt15">{{ result.money || '--' }}</view>
				</view>
				<view class="f-1 p30">
					<view>有效订单/单</view>
					<view class="f50 wei mt15">{{ result.count || '--' }}</view>
				</view>
			</view>
		</view>
		
		<scroll-view v-if="sarr.length" class='ws-n p03 sarr bf pt10 p23' scroll-x='true'>
			<block v-for="(v,i) in sarr" :key='i'>
				<view @click="clickSarr(i)" class='f-g-0 mr15 bs10 c6 dis-in sarri f28 t-c' :class="{wei:v.active}" :style="{background:v.active?`rgba(${cTR(tColor)},1)`:'',color:v.active?'#ffffff':'#000'}">{{v.name}}</view>
			</block>
		</scroll-view>
		
		<pay-face-list :downPull="downPull" @nextPage="nextPage" @refresh="refresh" :order-type="query.orderType" :data="data" />
		<u-calendar
			v-model="showrl"
			mode="range"
			:btnstyle="{ background: '#FE9367' }"
			range-color="#FE9367"
			range-bg-color="rgba(253,215,75,0.2)"
			active-bg-color="#FE9367"
			@change="changeDate"
		></u-calendar>
	</view>
</template>

<script>
	import {
		utilMixins
	} from "@/common/util-mixins.js"
	import PayFaceList from "./components/PayFaceList"
	export default {
		components: {
			PayFaceList
		},
		mixins: [utilMixins],
		data(){
			return{
				showrl:false,
				downPull:false,
				query:{
					page:1,
					timeType:1 ,//1今天 2昨天 3一周
					startTime:'',
					endTime:''
				},
				result:{},
				data:[],
				sarr:[
					{
						name: '今天',
						active:true,
						timeType:1
					},
					{
						name: '昨天',
						active:false,
						timeType:2
					},
					{
						name: '一周',
						active:false,
						timeType:3
					},
					{
						name: '具体时间',
						active:false,
						timeType:4
					}
				]
			}
		},
		created() {
			this.fetchData()
		},
		methods:{
			nextPage(){
				this.query.page ++
				this.fetchData()
			},
			async refresh(){
				this.downPull = true
				this.data = []
				this.query.page = 1
				await this.fetchData()
				this.downPull = false
			},
			async fetchData(){
				try{
					let {data} = await this.util.request({
						'url': this.api.payFaceList,
						data:this.query
					})
					this.result = data
					this.data = this.data.concat(data.list)
				}catch(e){
					this.util.message(e.msg, 3)
				}
			},
			clickSarr(index){
				this.sarr.forEach((item,i) =>{
					if(i === index){
						item.active = true 
						this.query.timeType = item.timeType
					}else{
						item.active = false 
					}
				})
				if(this.query.timeType != 4){
					this.query.startTime = ''
					this.query.endTime = ''
					this.refresh()
				}else{
					this.showrl = true
				}
			},
			changeDate(e){
				this.query.startTime = e.startDate
				this.query.endTime = e.endDate
				this.refresh()
			}
		}
	}
</script>

<style scoped lang="scss">
	.sarr {
		height: 84rpx;
	
		.sarri {
			background: #F8F8F6;
			line-height: 64rpx;
			width: 158rpx;
			height: 64rpx;
		}
	}
</style>
